<template>
  <div>
    <div class="filterBar">
      <div class="title">
        <div><span>语种：</span></div>
      </div>
      <div class="filterItem">
        <div v-for="(type, key) in type" :key="key">
          <span
            :class="typeIndex == type.index ? 'isActive' : ''"
            @click="changeFilterCondition(type.index, areaIndex, lettersIndex)"
          >
            {{ type.val }}
          </span>
        </div>
      </div>
    </div>

    <div class="filterBar">
      <div class="title">
        <div><span>地区：</span></div>
      </div>
      <div class="filterItem">
        <div v-for="(area, key) in area" :key="key">
          <span
            :class="areaIndex == area.index ? 'isActive' : ''"
            @click="changeFilterCondition(typeIndex, area.index, lettersIndex)"
          >
            {{ area.val }}
          </span>
        </div>
      </div>
    </div>

    <div class="filterBar">
      <div class="title">
        <div><span>筛选：</span></div>
      </div>
      <div class="filterItem lettters">
        <div>
          <span
            :class="lettersIndex == '-1' ? 'isActive' : ''"
            @click="changeFilterCondition(typeIndex, areaIndex, '-1')"
            >热门</span
          >
        </div>
        <div v-for="(letter, key) in letters" :key="key">
          <span
            :class="lettersIndex == letter ? 'isActive' : ''"
            @click="changeFilterCondition(typeIndex, areaIndex, letter)"
          >
            {{ letter | toUppercaseLetter }}
          </span>
        </div>
        <div>
          <span
            :class="lettersIndex == '0' ? 'isActive' : ''"
            @click="changeFilterCondition(typeIndex, areaIndex, '0')"
            >#</span
          >
        </div>
      </div>
    </div>

    <!-- 歌手 -->
    <div class="songer">
      <div v-for="(songer, key) in songerList" :key="key">
        <el-image
          @click="toSongerDetailPage(songer.id)"
          style="width: 160px; height: 160px"
          :src="songer.picUrl"
          fit="fill"
        ></el-image>

        <div class="desc">
          <div class="name" @click="toSongerDetailPage(songer.id)">
            {{ songer.name }}
          </div>
          <div v-show="songer.accountId" class="icon">
            <i
              class="el-icon-user"
              @click="toUserDetailPage(songer.accountId, songer.name)"
            ></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  data() {
    return {
      // 歌手类型
      type: [
        {
          val: '全部',
          index: '-1',
        },
        {
          val: '男歌手',
          index: '1',
        },
        {
          val: '女歌手',
          index: '2',
        },
        {
          val: '乐队',
          index: '3',
        },
      ],
      // 歌手地区
      area: [
        {
          val: '全部',
          index: '-1',
        },
        {
          val: '华语',
          index: '7',
        },
        {
          val: '欧美',
          index: '96',
        },
        {
          val: '日语',
          index: '8',
        },
        {
          val: '韩国',
          index: '16',
        },
        {
          val: '其他',
          index: '0',
        },
      ],
      // 26个英文字母
      letters: [],
      // 筛选条件
      typeIndex: '-1',
      areaIndex: '-1',
      lettersIndex: '-1',
      // 歌手
      songerList: [],
    }
  },

  created() {
    this.keepRouterHighlight()
    this.getTwoSixLetters()
    this.allArtists()
  },
  watch: {
    typeIndex: function (newVal, oldVal) {
      this.allArtists()
    },
    areaIndex: function (newVal, oldVal) {
      this.allArtists()
    },
    lettersIndex: function (newVal, oldVal) {
      this.allArtists()
    },
  },
  filters: {
    // 将字母转化为大写
    toUppercaseLetter: function (val) {
      const letter = val.toUpperCase()
      return letter
    },
  },
  methods: {
    ...mapMutations([
      'changePath',
      'changeIsActive',
      'changeIsMyself',
      'changeSongerId',
      'changeMusicPlayInfo',
      'changeTheDetailUserId',
      'changeTheDetailUserName',
    ]),

    // 保持状态栏高亮
    keepRouterHighlight() {
      const active = '5'
      this.$emit('keepRouterHighlight', active)
    },
    // 获取26个英文字母
    getTwoSixLetters() {
      let templist = []
      for (let i = 0; i < 26; i++) {
        const litter = String.fromCharCode(97 + i)
        templist.push(litter)
      }
      this.letters = templist
    },
    // 获取歌手列表
    async allArtists() {
      const { data: res } = await this.$http({
        url: `/artist/list?limit=30
        &type=${this.typeIndex}
        &area=${this.areaIndex}
        &initial=${this.lettersIndex}`,
        withCredentials: true, //关键
      })
      // console.log(res)

      // let tempListDatas = []
      // res.artists.map((item) => {
      //   let listObj = {}

      //   listObj.id = item.id
      //   listObj.name = item.name
      //   listObj.picUrl = item.picUrl
      //   listObj.accountId = item.accountId

      //   return tempListDatas.push(listObj)
      // })
      // this.songerList = tempListDatas

      this.songerList = res.artists
    },
    //更改筛选条件
    changeFilterCondition(typeIndex, areaIndex, lettersIndex) {
      this.typeIndex = typeIndex
      this.areaIndex = areaIndex
      this.lettersIndex = lettersIndex
    },
    // 跳转到个人信息页面
    toUserDetailPage(accountUserId, username) {
      const info = {
        path: '/view/userdetail',
        isMyself: this.userId == accountUserId,
        theDetailUserId: accountUserId,
        theDetailUserName: username,
      }

      this.changePath(info.path)
      this.changeIsMyself(info.isMyself)
      this.changeTheDetailUserId(info.theDetailUserId)
      this.changeTheDetailUserName(info.theDetailUserName)

      this.$emit('getUserDetailInfo')
    },
    // 跳转到歌手详情页面
    toSongerDetailPage(songerId) {
      const info = {
        path: '/view/songerdetail',
        songerId: songerId,
      }

      this.changePath(info.path)
      this.changeSongerId(info.songerId)

      this.$emit('getSongerDetailInfo')
    },
  },
}
</script>

<style lang="less" scoped>
.filterBar {
  padding-left: 12px;
  display: flex;
  font-size: 14px;

  .title {
    width: 60px;
    span {
      padding: 4px 6px;
    }
  }
  .filterItem {
    width: 800px;
    display: flex;
    flex-wrap: wrap;
    > div {
      padding-bottom: 10px;
      width: 80px;
      span {
        padding: 2px 16px;
        border-radius: 12px;
        color: #768181;
      }
      span:hover {
        cursor: pointer;
        background-color: #fdeded;
      }
      .isActive {
        background-color: #fdeded;
        color: #ec4141;
      }
    }
  }
  > .lettters {
    div {
      text-align: center;
      span {
        margin-right: 18px;
      }
    }
  }
}

.songer {
  display: flex;
  flex-wrap: wrap;
  padding-top: 12px;
  > div {
    padding: 0px 12px 20px 12px;
    position: relative;
    .el-image {
      border-radius: 6px;
      cursor: pointer;
    }

    > .desc {
      width: 160px;
      font-size: 15px;
      padding-top: 4px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: flex;
      justify-content: space-between;
      > .name {
        cursor: pointer;
      }
      > .icon {
        cursor: pointer;
        color: white;
        background-color: #ec4141;
        border-radius: 50%;
        font-size: 14px;
        width: 20px;
        height: 20px;
        > .el-icon-user {
          position: relative;
          left: 3px;
        }
      }
    }
  }
}
</style>